<template>
    <div style="width:100%;height:100%;overflow:hidden">
        <div v-show="is_loading" style="text-align:center">
            <weui-icon type="loading">
            </weui-icon>
        </div>
        <weui-panel title="" :list="panel_0_list" style="overflow-y:auto" class="hidden-sm-and-up"
                    :style="{maxHeight: 'calc(100% - ' + (is_loading ? 20 : 0) + 'px)'}"
                    v-if="is_mobile"
                    @on-click="on_panel_0_click">
        </weui-panel>
        <div style="overflow-y:auto;padding:0 5px;"
            :style="{maxHeight: 'calc(100% - ' + (is_loading ? 20 : 0) + 'px)'}"
            v-else>
            <el-row :gutter="10" class="hidden-xs-only" v-for="i in Math.ceil(panel_0_list.length / 4)" :key="i">
                <el-col :xs="6" :sm="6" :md="6" :lg="6" :xl="6"
                        v-for="(item, j) in panel_0_list.slice(i * 4 - 4, i * 4)"
                        :key="item.link">
                    <el-card :body-style="{ padding: '0px' }">
                        <div @click="on_panel_0_click(i * 4 - 4 + j)">
                            <img v-lazy="item.img" style="width:100%">
                            <div style="padding: 14px;">
                                <div>{{item.title}}</div>
                                <div v-html="item.desc" style="font-size:14px;color:#333333"></div>
                            </div>
                        </div>
                    </el-card>
                </el-col>
            </el-row>
        </div>
        <weui-dialog title="淘口令" :list="dialog_0_list" :is_show="dialog_2_is_show" @on-click="dialog_2_on_click">
            长按复制本条本条信息{{dialog_2_content}}，然后打开手机淘宝
        </weui-dialog>
        <weui-toast :is_show="loading_is_show" type="loading" :content="loading_content">
        </weui-toast>
        <weui-dialog :is_show="code_dialog_is_show" title="请输入验证码" :list="['提交']"
                     @on-click="on_code_dialog_click">
            <weui-input :list="code_dialog_input_list" title="" :show_more="false" :tips="null"
                        agreement_name="" more_label=""></weui-input>
        </weui-dialog>
    </div>
</template>

<script>
    import WeuiSearchBar from '../vue2componentSet/src/components/WeuiSearchBar'
    import WeuiPanel from '../vue2componentSet/src/components/WeuiPanel'
    import WeuiButton from '../vue2componentSet/src/components/WeuiButton'
    import WeuiDialog from '../vue2componentSet/src/components/WeuiDialog'
    import WeuiInput from '../vue2componentSet/src/components/WeuiInput'
    import WeuiIcon from '../components/WeuiIcon'
    import WeuiToast from '../components/WeuiToast'
    import global from '../lib/global'
    import browserDetect from '../lib/browserDetect'
    import axios from 'axios'

    export default {
        components: {
            WeuiPanel,
            WeuiDialog,
            WeuiInput,
            WeuiIcon,
            WeuiToast
        },
        data() {
            return {
                itemList: [],
                need_get_code: 0,
                code_dialog_is_show: false,
                code: '',
                codeRequestId: 0,
                is_loading: 0,
                is_mobile: browserDetect().mobile,
                loading_is_show: false,
                loading_content: '正在计算返现金额',
                dialog_0_list: ['取消', '确定'],
                dialog_2_is_show: false,
                dialog_2_content: ''
            }
        },
        mounted() {
            this.$store.commit('set_title', 'top 100')
            this.get_top100_item()
        },
        methods: {
            openAdvLink(link) {
                if (!this.$store.state.customer) {
                    this.$store.commit('login_dialog', {
                        is_show: true,
                        resolve: () => {
                            this.openAdvLink(link)
                        }
                    })
                    return
                }
                this.need_get_code++
                this.need_get_code == 1 && this.get_code()
                this.loading_is_show = true
                axios.post(global.server + 'getAdvLink.do', {
                    link: link
                }).then(result => {
                    const obj = result.data
                    if (obj.result == 0) {
                        this.$store.commit('customer_login', null)
                        this.$store.commit('login_dialog', {
                            is_show: true,
                            resolve: () => {
                                this.openAdvLink(link)
                            }
                        })
                    } else if (obj.result == -1) {
                        if (obj.msg == '该商品不能返利') {
                            this.$store.commit('dialog', {
                                is_show: true,
                                title: '错误',
                                content: obj.msg,
                                list: ['关闭', '继续前往'],
                                'on-click': index => {
                                    if (index == 0) {
                                        this.$store.commit('dialog', {
                                            is_show: false
                                        })
                                    } else if (index == 1) {
                                        //location.href = link
                                        const node = document.getElementById('open-url')
                                        node.href = link
                                        node.click()
                                    }
                                }
                            })
                        } else {
                            this.$store.commit('dialog', {
                                is_show: true,
                                title: '错误',
                                content: obj.msg,
                                list: ['确定'],
                                'on-click': index => {
                                    this.$store.commit('dialog', {
                                        is_show: false
                                    })
                                }
                            })
                        }
                    } else {
                        new Promise(resolve => {
                            if (obj.rate && obj.price) {
                                this.$store.commit('toast', {
                                    content: '本次购物返现金额预计为' + Math.round(obj.price * obj.rate) / 100 + '元(' + obj.rate + '%)',
                                    type: 'success'
                                })
                                setTimeout(() => {
                                    resolve()
                                }, 2000)
                                return
                            }
                            resolve()
                        }).then(result => {
                            if (obj.advLink.indexOf('taobao') != -1 || obj.advLink.indexOf('tmall') != -1) {
                                if (browserDetect().wechat) {
                                    if (obj.tpwd) {
                                        this.dialog_2_content = obj.tpwd
                                        this.dialog_2_is_show = true
                                    } else {
                                        this.$store.commit('toast', {
                                            type: 'warn',
                                            content: '请用系统浏览器打开'
                                        })
                                    }
                                    return
                                }
                            }
                            if (browserDetect().Safari || browserDetect().FireFox) {
                                location.href = obj.advLink
                            } else {
                                const node = document.getElementById('open-url')
                                node.href = obj.advLink
                                node.click()
                            }
                        })
                    }
                    this.need_get_code--
                    this.loading_is_show = false
                }, result => {
                    console.log(result)
                    this.need_get_code--
                    this.loading_is_show = false
                })
            },
            get_top100_item() {
                if (global.is_debug) {
                    this.itemList.push({
                        link: 'https://www.taobao.com',
                        img: ''
                    })
                    return
                }
                this.is_loading++
                axios.post(global.server + 'getTop100Item.do', '{}').then(result => {
                    const obj = result.data
                    obj.list.forEach(item => {
                        this.itemList.push(item)
                    })
                    this.is_loading--
                }, result => {
                    console.log(result)
                    this.is_loading--
                })
            },
            on_panel_0_click(index) {
                console.log(index)
                if (!this.panel_0_list[index].rawLink) {
                    return
                }
                this.openAdvLink(this.panel_0_list[index].rawLink)
            },
            get_code() {
                if (this.need_get_code <= 0) {
                    this.code_dialog_is_show = false
                    return
                }
                axios.post(global.server + 'getFanliCode.do', {}).then(result => {
                    const obj = result.data
                    if (obj.code) {
                        if (obj.codeRequestId != this.codeRequestId) {
                            if (this.need_get_code > 0) {
                                this.code_dialog_is_show = true
                                this.code = 'data:image/png;base64,' + obj.code
                                this.codeRequestId = obj.codeRequestId
                            }
                        }
                    } else {
                        this.code_dialog_is_show = false
                    }
                    setTimeout(() => {
                        this.get_code()
                    }, 1000)
                }, result => {
                    console.log(result)
                    this.code_dialog_is_show = false
                })
            },
            on_code_dialog_click(index) {
                if (index == 0) {
                    axios.post(global.server + 'submitFanliCode.do', {
                        codeRequestId: this.codeRequestId,
                        codeText: this.code_dialog_input_list[0].value
                    }).then(result => {
                    }, result => {
                    })
                }
            },
            dialog_2_on_click(index) {
                this.dialog_2_is_show = false
            }
        },
        computed: {
            panel_0_list() {
                var list = []
                var i = 0
                while (true) {
                    var hasMore = false
                    if (this.itemList.length <= i || !this.itemList[i].link) {
                        break
                    }
                    var item = this.itemList[i]
                    var img = item.img
                    if (!img.startsWith('http')) {
                        img = 'https:' + img
                    }
                    if (!img.startsWith('https')) {
                        img = 'https:' + img.substring(4)
                    }
                    if (browserDetect().Safari && img.endsWith('_.webp')) {
                        img = img.substring(0, img.length - 6)
                    }
                    var desc = ''
                    item.price && (desc += '价格: ￥' + item.price)
                    item.rate && (desc += '<br>返还: ' + item.rate + '%')
                    var infos = []
                    item.sale && infos.push('销量: ' + item.sale)
                    item.shopName && infos.push('店名: ' + item.shopName)
                    list.push({
                        img: img,
                        title: item.title,
                        desc: desc,
                        infos: infos,
                        rawLink: item.link,
                        price: item.price,
                        rate: item.rate
                    })
                    i++
                }
                return list
            },
            code_dialog_input_list() {
                return [{
                    value: '',
                    img: this.code
                }]
            }
        }
    }
</script>
